<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./code/base.css">
    <link rel="stylesheet" href="./code/xiami.css">
    <link rel="stylesheet" href="./code/PaiHangBang.css">
</head>
<body>
    <div class="header container clearfix">
        <!-- 顶部导航栏 -->
        <div class="XM_logo fl">
            <img src="./img/XM_logo.png" alt="">
        </div>
        <div class="Hnav fl">
            <a href="" class="hnav1">发现</a>
            <a href="">我的音乐</a>
            <a href="">音乐人</a>
            <a href="">客户端下载</a>
            <a href="">会员中心</a>
        </div>

        <input type="text" placeholder="exo">
        <span class="icon_search"></span>
        <div class="login fl"> <a href="">登录/注册</a></div>
        <!-- 顶部导航栏 end-->
        </div>
    </div>

    <!-- 灰色背景部分 -->
    <div class="gray-bg">
           <div class="bg-title ">
               <div>虾米官方版</div>
               <span class="defaul-sp1">新歌</span>
               <span>热歌</span>
               <span>原创</span>
           </div>

           <div class="pic fl"><img src="./img/gray-bg1.jpg" alt=""></div>
           <div class="song-list fl">
               <div class="song-play clearfix">
                   <a href=""><div class="d1 fl">全部播放</div></a>
                   <a href=""><div class="fr clearfix">详情
                      <span>></span>
                    </div></a>
               </div>

               <div class="song-name">
                    <div class="color1"><div class="num ">1</div><img src="./img/XD1.jpg" alt="">因为你 所以我</div>
                    <div class="color1"><div class="num ">5</div><img src="./img/XD2.jpg" alt="">夏宫</div>
                    <div class="color2"><div class="num ">2</div><img src="./img/XD6.jpg" alt="">小娟（化名）</div>
                    <div class="color2"><div class="num ">6</div><img src="./img/XD3.jpg" alt="">风吹散 晚安 不再见</div>
                    <div class="color1"><div class="num ">3</div><img src="./img/XD10.jpg" alt="">NaKuNa</div>
                    <div class="color1"><div class="num ">7</div><img src="./img/XD9.jpg" alt="">电台放克</div>
                    <div class="color2"><div class="num ">4</div><img src="./img/XD7.jpg" alt="">Prefect shelter</div>
                    <div class="color2"><div class="num ">8</div><img src="./img/XD1.jpg" alt="">Open your mind</div>
               </div>
           </div>
    </div>
      <!-- 灰色背景部分 end-->

        <!--全球媒体榜  -->
      <div class="container">
          <div class="con-center">
            <div class="G-media">
                全球媒体榜
            </div>
            <div class="example clearfix">
                <div><a href=""><img src="./img/EX1.jpg" alt=""></a><p>美国Billboard单曲榜</p><h3>每周五更新</h3></div>
                <div><a href=""><img src="./img/EX2.jpg" alt=""></a><p>美国Billboard单曲榜</p><h3>每周五更新</h3></div>
                <div><a href=""><img src="./img/EX3.jpg" alt=""></a><p>美国Billboard单曲榜</p><h3>每周五更新</h3></div>
                <div><a href=""><img src="./img/EX5.jpg" alt=""></a><p>美国Billboard单曲榜</p><h3>每周五更新</h3></div>
                <div class="clear-box"><img src="./img/EX4.jpg" alt=""><p>美国Billboard单曲榜</p><h3>每周五更新</h3></div>
                <div><a href=""><img src="./img/EX6.jpg" alt=""></a><p>美国Billboard单曲榜</p><h3>每周五更新</h3></div>
                <div><a href=""><img src="./img/EX7.jpg" alt=""></a><p>美国Billboard单曲榜</p><h3>每周五更新</h3></div>
                <div><a href=""><img src="./img/EX8.jpg" alt=""></a><p>美国Billboard单曲榜</p><h3>每周五更新</h3></div>
            </div>
          </div>
          
      </div>



    <!-- 黑色底部 -->
      <div class="footer clearfix">
        <div class="Big-info clearfix fl">
            <div class="info">
                <div class="info-left fl">
                    <span>关于虾米</span>
                    <span>入驻虾米</span>
                    <span>资料补全</span>
                    <span>桌面端</span>
                    <span>合作伙伴</span>
                </div>
                <div class="info-right fl ">
                    <div class="clearfix"><a href="">关于我们</a><a href="">虾米招聘</a><a href="">联系我们</a><a
                            href="">隐私权政策</a><a href="">联系客服</a><a href="">意见反馈</a><a href="">回旧版</a></div>
                    <div class="clearfix"><a href="">音乐人</a><a href="">音乐专栏</a></div>
                    <div class="clearfix"><a href="">添加资料</a><a href="">大家想要的专辑</a><a href="">音频上传</a><a
                            href="">MV上传</a></div>
                    <div class="clearfix"><a href="">pc电脑</a><a href="">苹果电脑</a></div>
                    <div class="clearfix small-pic">
                        <div><img src="./img/AI2.jpg" alt=""></div>
                        <div><img src="./img/XD2.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                        <div><img src="./img/AI4.jpg" alt=""></div>
                        <div><img src="./img/AI2.jpg" alt=""></div>
                        <div><img src="./img/party1.jpg" alt=""></div>
                        <div><img src="./img/AI5.jpg" alt=""></div>
                        <div><img src="./img/party3.jpg" alt=""></div>
                        <div><img src="./img/party4.jpg" alt=""></div>
                        <div><img src="./img/party5.jpg" alt=""></div>
                        <div><img src="./img/party4.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                        <div><img src="./img/AI2.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                        <div><img src="./img/AI3.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                        <div><img src="./img/AI2.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                        <div><img src="./img/AI2.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                    </div>
                </div>
            </div>
            
        </div>
        <div class="focus-us fl">
            <div>关注我们</div>
            <div>
                <span><img src="./img/weibo.png" alt=""></span>
                <span><img src="./img/weixin.png" alt=""></span>
                <span><img src="./img/zhihu.png" alt=""></span>
            </div>
        </div>
        <div class="Erweima fr">
            <p>虾米音乐APP</p>
            <div><img src="./img/Eweima.png" alt=""></div>
        </div>
      <div class="line"></div>
      <!-- footer 最下面 -->
      <ul>
          <li><a href="">淘宝网</a></li>
          <li>|</li>
          <li><a href="">天猫</a></li>
          <li>|</li>
          <li><a href="">支付宝</a></li>
          <li>|</li>
          <li><a href="">飞猪</a></li>
          <li>|</li>
          <li><a href="">聚划算</a></li>
          <li>|</li>
          <li><a href="">阿里云</a></li>
          <li>|</li>
          <li><a href="">阿里妈妈</a></li>
          <li>|</li>
          <li><a href="">1688</a></li>
          <li>|</li>
          <li><a href="">AliOS</a></li>
          <li>|</li>
          <li><a href="">阿里通信</a></li>
          <li>|</li>
          <li><a href="">万网</a></li>
          <li>|</li>
          <li><a href="">阿里游戏</a></li>
          <li>|</li>
          <li><a href="">大麦网</a></li>
          <li>|</li>
          <li><a href="">一淘</a></li>
          <li>|</li>
          <li><a href="">狂野飙车9</a></li>
          <li>|</li>
          <li><a href="">UCCricket</a></li>
          <li>|</li>
          <li><a href="">阿里安全</a></li>
          

      </ul>
      <div class="subfont">
       <p> © 2007 - 2020 杭州阿里巴巴音乐科技有限公司 版权所有 阿里巴巴旗下公司</p>
       <ul class="subul clearfix">
           <li><a href="">营业执照</a></li>
           <li>|</li>
           <li><a href="">网络文化经营许可证 :浙网文(2019)4999-453号</a></li>
           <li>|</li>
           <li><a href="">增值电信业务经营许可证 :浙B2-20110188 </a></li>
           <li>|</li>
           <li><a href="">浙ICP备18050417号-2</a></li>
           <li>|</li>
           <li><a href="">浙公网安备 33011002012729号</a></li>
       </ul>
      </div>
     <!-- footer 最下面 -->
      <!-- 黑色底部 -->
</body>
</html>